<template>
<div class="kaisuo">
  <h5>请输入开锁密码</h5>
  <div class="box">
    <div class="password">
      <div class="number">
        <span class="iconfont icon-dian" v-show="passwordNumber > 0"></span>
      </div>
      <div class="number">
        <span class="iconfont icon-dian" v-show="passwordNumber > 1"></span>
      </div>
      <div class="number">
        <span class="iconfont icon-dian" v-show="passwordNumber > 2"></span>
      </div>
      <div class="number">
        <span class="iconfont icon-dian" v-show="passwordNumber > 3"></span>
      </div>
      <div class="number">
        <span class="iconfont icon-dian" v-show="passwordNumber > 4"></span>
      </div>
      <div class="number">
        <span class="iconfont icon-dian" v-show="passwordNumber > 5"></span>
      </div>
    </div>
    <div class="forget" @click="forget">
      忘记密码？
    </div>
  </div>
  <div class="keyboard">
    <div class="line line-one">
      <div class="number-box" @click="keyAdd(1)">
        1
      </div>
      <div class="number-box" @click="keyAdd(2)">
        2
      </div>
      <div class="number-box" @click="keyAdd(3)">
        3
      </div>
    </div>
    <div class="line line-two">
      <div class="number-box" @click="keyAdd(4)">
        4
      </div>
      <div class="number-box" @click="keyAdd(5)">
        5
      </div>
      <div class="number-box" @click="keyAdd(6)">
        6
      </div>
    </div>
    <div class="line line-three">
      <div class="number-box" @click="keyAdd(7)">
        7
      </div>
      <div class="number-box" @click="keyAdd(8)">
        8
      </div>
      <div class="number-box" @click="keyAdd(9)">
        9
      </div>
    </div>
    <div class="line line-four">
      <div class="refuse" @click="refuse">
        拒绝
      </div>
      <div class="number-box" @click="keyAdd(0)">
        0
      </div>
      <div class="del" @click="keyMinus">
        <span class="iconfont icon-shanchu"></span>
      </div>
    </div>
  </div>
  <div v-transfer-dom>
    <alert v-model="tipFlag" :title="'远程开锁'">
      <div slot="default" class="alertContent">
        <p>操作超时，请在智能锁终端，</p>
        <p>重新发起远程开锁请求</p>
      </div>
    </alert>
  </div>
  <div v-transfer-dom>
    <confirm v-model="reviseFlag" :title="'密码重置'" @on-confirm="onConfirm('new')">
      <div slot="default" class="revise">
        <input type="text" placeholder="新6位数字密码" v-model="passwordvalue">
        <br />
        <input type="text" placeholder="重复新密码" v-model="repeatpassword">
      </div>
    </confirm>
  </div>
  <div v-transfer-dom>
    <confirm v-model="reviseFlag2" :title="'密码重置'" @on-confirm="onConfirm('old')">
      <div slot="default" class="revise">
        <input type="text" placeholder="重复密码" v-model="oldpassword">
        <br />
        <input type="text" placeholder="新6位数字密码" v-model="passwordvalue">
        <br />
        <input type="text" placeholder="重复新密码" v-model="repeatpassword">
      </div>
    </confirm>
  </div>
  <div v-transfer-dom>
    <confirm v-model="refuseFlag" :title="'请输入密码'" @on-confirm="onConfirm2">
      <div slot="default" class="revise">
        <input type="text" placeholder="6位数字密码" v-model="refusePassword">
      </div>
    </confirm>
  </div>
  <div v-transfer-dom>
    <alert v-model="tipFlag2" :title="'忘记密码'">
      <div slot="default" class="alertContent">
        <p>在锁上按000000发送请求</p>
        <p>然后在次“忘记密码？”重置</p>
      </div>
    </alert>
  </div>

  <toast :type="'warn'" :text="'密码输入错误'" v-model="errorFlag" :width="'10em'"></toast>
  <toast :type="'cancel'" :text="'已拒绝'" v-model="refuseFlag" :width="'10em'"></toast>
  <toast :type="'success'" :text="'已开锁'" v-model="openFlag" :width="'10em'"></toast>

</div>
</template>
<script>
import "../iconfont/iconfont.css";
import {
  Alert,
  TransferDomDirective as TransferDom,
  Toast,
  Confirm
} from "vux";
export default {
  directives: {
    TransferDom
  },
  components: {
    Alert,
    Toast,
    Confirm
  },
  data: function() {
    return {
      passwordNumber: 0,
      password: "",
      tipFlag: false,
      errorFlag: false,
      refuseFlag: false,
      openFlag: false,
      reviseFlag: false,
      passwordvalue: "",
      repeatpassword: "",
      font: 0,
      tipFlag2: false,
      reviseFlag2: false,
      oldpassword: "",
      refuseFlag: false,
      refusePassword: ""
    };
  },
  mounted: function() {
    //首先判断 是否绑定
    this.$IsBind(
      () => {
        this.$vux.alert.show({
          title: "尚未绑定智能锁",
          content: "跳转到设备绑定界面",
          onHide: () => {
            this.$router.push({
              path: "/main/bind"
            });
          }
        });
      },
      () => {
        //获取智能锁远程操作状态，判断当前是否有开锁请求，如果没有则弹出提示框让用户处理
        this.remoteControlDoor();
      }
    );
  },
  watch: {
    passwordNumber: function(newValue, oldValue) {
      if (this.passwordNumber == 6) {
        //提交密码 验证密码是否正确
        this.doOpenDoor(true, this.password);
      }
    }
  },
  methods: {
    keyAdd: function(key) {
      if (this.passwordNumber < 6) {
        this.passwordNumber++;
        this.password += key;
      }
    },
    keyMinus: function() {
      if (this.passwordNumber > 0) {
        this.passwordNumber--;
        this.password = this.password.slice(0, this.passwordNumber);
      }
    },
    refuse: function() {
      // this.refuseFlag = true;
    },
    onConfirm2: function() {
      this.doOpenDoor(false, this.refusePassword);
    },
    onConfirm: function(type) {
      //确定要 修改密码 了
      if (this.passwordvalue != this.repeatpassword) {
        this.$vux.toast.show({
          text: "两次密码不匹配"
        });
        return;
      }
      if (this.passwordvalue.length != 6) {
        this.$vux.toast.show({
          text: "密码须是6位数字"
        });
        return;
      }
      //ajax
      var obj;
      if (type == "old") {
        obj = {
          oldPassword: this.oldpassword,
          newPassword: this.passwordvalue
        };
        this.$http
          .post("http://iot.malanco.com/changePassword", obj)
          .then(response => {
            if (response.data.success == "true") {
              this.$vux.toast.show({
                text: "操作成功"
              });
            }
          }, response => {
            var message = response.response.data.exceptionObj.message;
            this.$vux.toast.show({
              type: "warn",
              text: message
            })
          })
      } else if (type == "new") {
        obj = {
          newPassword: this.passwordvalue
        };
        this.$http
          .post("http://iot.malanco.com/resetPassword", obj)
          .then(response => {
            console.log(response.data);
            if (response.data.success == "true") {
              this.$vux.toast.show({
                text: "操作成功"
              });
            }
          }, response => {
            var message = response.response.data.exceptionObj.message;
            this.$vux.toast.show({
              type: "warn",
              text: message
            })
          })
      }

    },
    remoteControlDoor: function() {
      this.$http
        .get("http://iot.malanco.com/getMyLockRemoteControl")
        .then(response => {
          if (response.data.success == "true") {
            var lockRemoteControl = response.data.data;
            var now = new Date();
            if (lockRemoteControl != null) {
              //当智能锁未被操作，并且时间为超过5分钟，
              if (!lockRemoteControl.operated) {
                if (now.getTime() - lockRemoteControl.requestTime < 300000) {} else {
                  this.tipFlag = true;
                }
              } else {
                this.$vux.alert.show({
                  title: "远程开锁",
                  content: "没有开锁请求或已操作"
                });
              }
            }
          }
        });
    },
    doOpenDoor: function(allowed, password) {
      var obj = {
        allowed: allowed,
        password: password
      };
      this.$http
        .post("http://iot.malanco.com/remoteControlOpDoor", obj)
        .then(response => {
          console.log(response.data);
          if (response.data.success == "true") {
            var device = response.data.data;
            if (
              device == null ||
              device.deviceId == "" ||
              device.deviceId == null
            ) {
              //弹框提示用户操作成功.
              this.openFlag = true;
            }
          }
        }, response => {
          var message = response.response.data.exceptionObj.message;
          this.$vux.toast.show({
            type: "warn",
            text: message
          })
        })
    },
    forget: function() {
      if (this.font == 0) {
        this.tipFlag2 = true;
        this.font++;
      } else if (this.font == 1) {
        this.getLatestOpenDoorEvent();
      }
    },
    getLatestOpenDoorEvent: function() {
      console.log("getLatestOpenDoorEvent");
      var event = null;
      this.$http.get("http://iot.malanco.com/getLatestOpenDoorEvent").then(response => {
        if (response.data.success == "true") {
          event = response.data.data;
          var now = new Date();
          //上次开门事件在五分钟之内，所以不需要输入重复密码
          if (event != null && (now.getTime() - event.createTime) < 300000) {
            //不需要输入原密码
            this.reviseFlag = true;
          } else {
            //需要输入原密码
            this.reviseFlag2 = true;
          }
        }
      }, response => {
        var message = response.response.data.exceptionObj.message
        this.$vux.toast.show({
          type: "warn",
          text: message
        })
      })
    }
  }
};
</script>
<style lang="less" scoped>
.kaisuo {
    padding: 7px;
    h5 {
        text-align: center;
    }
    .box{
        width: 210px;
        margin: 0 auto;
    }
    .password {
        width: 210px;
        height: 35px;
        border-radius: 2px;
        border: 1px solid #e8e7e6;
        margin: 0 auto;
        display: flex;
        margin-top: 10px;
        .number {
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #e8e7e6;
            width: 35px;
            height: 33px;
        }
    }
    .forget {
        font-size: 12px;
        display: flex;
        justify-content: flex-end;
        // padding-right: 5px;
        color: #58c1f1;
        margin-right: -3px;
    }
    .keyboard {
        margin: 10px auto 0;
        .line {
            display: flex;
            justify-content: center;
            .number-box {
                font-size: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 73px;
                height: 41px;
                border-top: 1px solid #fafafa;
                border-left: 1px solid #fafafa;
            }
            .number-box:first-child {
                border-left: 0;
            }
        }
        .line-four {
            .refuse {
                background-color: #dcdddd;
                width: 73px;
                height: 41px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #fff;
            }
            .del {
                background-color: #dcdddd;
                width: 73px;
                height: 41px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #fff;
                .iconfont {
                    font-size: 25px;
                }
            }
        }
    }
}
.revise {
    input {
        margin-top: 10px;
        height: 25px;
        line-height: 25px;
        // width: 100%;
    }
    input:first-child{
        margin-top: 0;
    }
    input:last-child{
        margin-left: -4px;
    }
}
.vux-alert {
    .vux-x-dialog {
        .weui-dialog {
            transform: scale(0.8);
        }
    }
}
</style>
